import { useState } from "react";

import style from "./index.module.less";
import { PageContainer, ProList } from "@ant-design/pro-components";
import { useStudents } from "@/services/student";
import { Button, Tag } from "antd";
import { DEFAULT_PAGE_SIZE } from "@/utils/contants";

/**
 * 学员
 */
const Student = () => {
  const [showEdit, setShowEdit] = useState(false);
  const [curId, setCurId] = useState("");
  const { loading, page, data, refetch } = useStudents();

  const onPageChanngeHandler = (pageNum = 1, pageSize = 10) => {
    refetch({
      page: {
        pageNum,
        pageSize,
      },
    });
  };
  const dataSource = data?.map((item) => ({
    ...item,
    subTitle: (
      <div>
        {item.tags?.split(",").map((tag) => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </div>
    ),
    actions: [
      <a key="edit" onClick={() => editInfoHandler(item.id)}>
        编辑
      </a>,
      <a key="delete" onClick={() => delInfoHandler()}>
        删除
      </a>,
    ],
    content: item.address,
  }));
  const addInfoHandler = () => {
    setCurId("");
    setShowEdit(true);
  };
  const onCloseHandler = () => {
    onPageChanngeHandler(page?.pageNum, page?.pageSize);
    setShowEdit(false);
  };
  const editInfoHandler = (id: string) => {
    setCurId(id);
    setShowEdit(true);
  };
  const delInfoHandler = () => {
    // 发送请求
    // await use。。。
    // 刷新页面
    onPageChanngeHandler(page?.pageNum, page?.pageSize);
  };
  return (
    <div className={style.container}>
      <PageContainer
        loading={loading}
        header={{ title: "学生管理" }}
        extra={[
          <Button key="1" type="primary" onClick={addInfoHandler}>
            新增学生
          </Button>,
        ]}
      >
        <ProList<any>
          pagination={{
            defaultPageSize: DEFAULT_PAGE_SIZE,
            showSizeChanger: false,
            total: page?.total,
            onChange: onPageChanngeHandler,
          }}
          grid={{ gutter: 10, column: 2 }}
          showActions="always"
          rowSelection={false}
          metas={{
            title: { dataIndex: "name" },
            subTitle: {},
            type: {},
            avatar: { dataIndex: "logo" },
            content: { dataIndex: "address" },
            actions: {
              cardActionProps: "extra",
            },
          }}
          dataSource={dataSource}
        />
        {/* {showEdit && <EditOrg id={curId} onClose={onCloseHandler} />} */}
        {showEdit && <div>{`编辑,${curId},${onCloseHandler}`}</div>}
      </PageContainer>
    </div>
  );
};

export default Student;
